<template>
  <div id="participatelist"> 
   
   <div class="con" >
      <div class="con_title">
          <div class="con_title_name">
            人员 </div>
          <div class="con_title_but" @click="delect_but(datalist[0].id)" v-if="datalist.length ==4 || datalist.length ==3 || datalist.length ==2 || datalist.length ==1">删除</div>
          <div class="con_title_but" @click="add_but()" v-if="datalist.length == 0">添加</div>
      </div>
      <div class="con_img_box">
          <div class="con_img">
              <img class="img" :src="urlimg + datalist[0].picture" v-if="datalist[0]" />
          </div>
      </div>
      <div class="con_input" >
     </div>

   </div>

   <div class="con" >
      <div class="con_title">
          <div class="con_title_name">
            人员 </div>
          <div class="con_title_but" @click="delect_but(datalist[1].id)" v-if="datalist.length ==4 || datalist.length ==3 || datalist.length ==2 ">删除</div>
          <div class="con_title_but" @click="add_but()" v-if="datalist.length == 1">添加</div>
      </div>
      <div class="con_img_box">
          <div class="con_img">
             <img class="img" :src="urlimg + datalist[1].picture" v-if="datalist[1]" />
          </div>
      </div>
      <div class="con_input" >
     </div>

   </div>

   <div class="con" >
      <div class="con_title">
          <div class="con_title_name">
            人员 </div>
          <div class="con_title_but" @click="delect_but(datalist[2].id)" v-if="datalist.length ==4 || datalist.length ==3 ">删除</div>
          <div class="con_title_but" @click="add_but()" v-if="datalist.length == 2">添加</div>
      </div>
      <div class="con_img_box">
          <div class="con_img">
               <img class="img" :src="urlimg + datalist[2].picture" v-if="datalist[2]"/>
          </div>
      </div>
      <div class="con_input" >
     </div>

   </div>

   <div class="con" >
      <div class="con_title">
          <div class="con_title_name">
            人员 </div>
          <div class="con_title_but" @click="delect_but(datalist[3].id)" v-if="datalist.length ==4 ">删除</div>
          <div class="con_title_but" @click="add_but()" v-if="datalist.length == 3">添加</div>
      </div>
      <div class="con_img_box">
          <div class="con_img">
               <img class="img" :src="urlimg + datalist[3].picture" v-if="datalist[3]" />
          </div>
      </div>
      <div class="con_input" >
     </div>

   </div>


                 <!-- 新增人员 -->
    <el-dialog title="新增人员" :visible.sync="add_mtk"  width="400px">
        <div style="width:100%;"> 


        <el-form ref="form"   label-width="50px" style="width:100%;">
     
               <el-row style="width:100%;">
                     <el-col :span="12">
                        <el-form-item label="图片">
                            <el-upload 
                                  action="uploadUrl"  
                                  :show-file-list="false"   
                                  :before-upload="beforeupload"
                                  :http-request="ImgUploadSectionFile">
                                  <div class="avatar-uploader">
                                      <img v-if="pic_form.head_img"  :src="pic_form.head_img" class="avatar">
                                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                  </div>
                            </el-upload>
                         </el-form-item>       
                     </el-col> 

                </el-row>                          
            </el-form>

            <div style="text-align: center;width:50%;margin:auto;">
                <el-button type="primary" class="custom_color_button" style="width:80%;" @click="add_qr_but()">确认</el-button>
            </div>

        </div> 
    </el-dialog>

</div>
</template>

<script>

export default {
   name: 'participatelist',
  data () {
    return {
        datalist:[],
        add_mtk:false,
        mtk_form:{
            title:'',
        },
        pic_form:{
            head_img:'',
            upfile:'',
        },
        my_id:''
    }
  },
   components:{

  },
  created(){
       this.list_fun()
  },
  mounted (){
    
  },
  methods: {
    list_fun(){
          this.post("/novice_goods/listOfTakeNumPersonel", {
                
	        }).then(res => {
            this.datalist = res.result
            //console.log(res.result,"ffff")
         })
    },
    delect_but(id){
         this.post("/novice_goods/delTakeNumPersonel", {
                id:id,
              }).then(res => {
                if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.list_fun()
                }else {
                    this.open1(res.message,'warning')
                }

            })
     },
     add_but(){
        this.pic_form.upfile = ''
        this.pic_form.head_img =''
        this.add_mtk = true
        
     },
     add_qr_but(){
      this.post("/novice_goods/addTakeNumPersonel", {
                picture:this.pic_form.upfile,
              }).then(res => {
                if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.add_mtk = false
                    this.list_fun()
                }else {
                    this.open1(res.message,'warning')
                }

            })
    },
    beforeupload(file){   //重新写入上穿 需要点击确认上传与表单一起提交
           if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.pic_form.head_img=windowURL.createObjectURL(file);             
            
            this.upimgpost("/image/uploadMultiple",file).then(res => {
              console.log(res.result.url )
               this.pic_form.upfile = res.result.url    
            })

            return false;
     },
     ImgUploadSectionFile(param){//图片上传    
     },
  }
}
</script>


<style scoped>
#setmeetinglist{
    margin-bottom: 15px;
}
.imga>>>.el-icon-circle-close {
      color: white;
}
.avatar-uploader  {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }

.con{
   padding:25px 20px;
   box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.04);
   height: 250px;
   border-radius:10px;
   width:calc(100%/3 - 60px);
   margin-left:15px;
   margin-top:15px;
   float: left;
}
.con:first-child{
     margin-left:0px;
}
.con:nth-child(4){
     margin-left:0px;
}
.con_title{
   display: flex;
   align-items: center;
}
.con_title_name{
    font-size: 24px;
    font-weight: bold;
    color: #344563;
    flex:1;
}
.con_title_but{
    width: 80px;
    height: 30px;
    background: #50A1FC;
    border-radius: 20px;
    line-height: 30px;
    text-align: center;
    font-size:14px;
    color:white;
}
.con_img_box{
    display: flex;
    align-items: center;
    justify-content: center;
    height:200px;
}
.con_img{
    width:150px;
    height: 150px;
    border-radius: 20px;
    background: #FDF4ED;
    display:flex;
    align-items: center;
    justify-content: center;
    margin-top:20px;
}
.con_img>.img{
    width:70%;
}
</style>